<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTML editor component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="../dist/js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <link rel="stylesheet" href="../vendor/codemirror/codemirror.css">
        <link rel="stylesheet" href="../vendor/codemirror/show-hint.css">
        <script src="../vendor/codemirror/codemirror.js"></script>
        <script src="../vendor/marked.js"></script>
        <script src="../dist/js/addons/htmleditor.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li class="uk-active"><a href="addons.html">Add-ons</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Layout</li>
                            <li><a href="addons_flex.html">Flex</a></li>
                            <li><a href="addons_cover.html">Cover</a></li>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="addons_dotnav.html">Dotnav</a></li>
                            <li><a href="addons_slidenav.html">Slidenav</a></li>
                            <li><a href="addons_pagination.html">Pagination</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="addons_form-advanced.html">Form advanced</a></li>
                            <li><a href="addons_form-file.html">Form file</a></li>
                            <li><a href="addons_form-password.html">Form password</a></li>
                            <li><a href="addons_form-select.html">Form select</a></li>
                            <li><a href="addons_placeholder.html">Placeholder</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li><a href="addons_autocomplete.html">Autocomplete</a></li>
                            <li><a href="addons_datepicker.html">Datepicker</a></li>
                            <li class="uk-active"><a href="addons_htmleditor.html">HTML editor</a></li>
                            <li><a href="addons_notify.html">Notify</a></li>
                            <li><a href="addons_search.html">Search</a></li>
                            <li><a href="addons_nestable.html">Nestable</a></li>
                            <li><a href="addons_sortable.html">Sortable</a></li>
                            <li><a href="addons_sticky.html">Sticky</a></li>
                            <li><a href="addons_timepicker.html">Timepicker</a></li>
                            <li><a href="addons_upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>HTML editor</h1>

                            <p class="uk-article-lead">Create a rich HTML or markdown editor with an immediate preview and syntax highlighting.</p>

                            <p>The HTML editor allows you to write in HTML or Markdown while it generates a real-time preview. It includes a toolbar that helps you to change text appearences and add links, pictures, blockquotes and lists without having to write code. The editor provides syntax highlighting for both HTML and Markdown and you can even toggle to fullscreen mode, so that you can work undisturbed on your content.</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

                            <p>To apply this component, you firstly need to include the necessary <a href="http://codemirror.net/">CodeMirror</a> and <a href="https://github.com/chjj/marked">marked</a> dependencies. To do so, just add the appropriate script to the header of your project.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;link rel="stylesheet" href="uikit.min.css" /&gt;
        &lt;script src="jquery.js">&lt;/script&gt;
        &lt;script src="uikit.min.js">&lt;/script&gt;

        &lt;!-- Codemirror and marked dependencies --&gt;
        &lt;link rel="stylesheet" href="codemirror/lib/codemirror.css"&gt;
        &lt;script src="codemirror/lib/codemirror.js"&gt;&lt;/script&gt;
        &lt;script src="codemirror/mode/markdown/markdown.js"&gt;&lt;/script&gt;
        &lt;script src="codemirror/addon/mode/overlay.js"&gt;&lt;/script&gt;
        &lt;script src="codemirror/mode/xml/xml.js"&gt;&lt;/script&gt;
        &lt;script src="codemirror/mode/gfm/gfm.js"&gt;&lt;/script&gt;
        &lt;script src="marked.js"&gt;&lt;/script&gt;

        &lt;!-- HTML editor JavaScript --&gt;
        &lt;script src="htmleditor.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>

                            <p>Afterwards, just add the <code>data-uk-htmleditor</code> attribute to a <code>&lt;textarea&gt;</code> element.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

<textarea data-uk-htmleditor="{maxsplitsize:600}"><h1>Heading</h1>

<p>Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">This is a link</a></p>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<h2>Heading</h2>

<p>Ut enim ad <em>minim</em> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></textarea>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;textarea data-uk-htmleditor&gt;...&lt;/textarea&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="markdown"><a href="#markdown" class="uk-link-reset">Markdown</a></h2>

                            <p>You can also write markdown inside the HTML editor. Just add the <code>markdown:true</code> option to the data attribute.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

<textarea data-uk-htmleditor="{maxsplitsize:600, markdown:true}">#Heading

Lorem ipsum dolor sit **amet**, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [This is a link](#)

* Item
* Item
* Item

## Heading

Ut enim ad *minim* veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<a href="#">This link is written in HTML</a></textarea>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;textarea data-uk-htmleditor="{markdown:true}"&gt;...&lt;/textarea&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="tab-mode"><a href="#tab-mode" class="uk-link-reset">Tab mode</a></h2>

                            <p>You can also switch between Markdown and Preview mode. Just add the <code>data-uk-htmleditor="{mode:'tab'}</code> attribute.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

<textarea data-uk-htmleditor="{mode:'tab', markdown:true}">#Heading

Lorem ipsum dolor sit **amet**, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [This is a link](#)

* Item
* Item
* Item

## Heading

Ut enim ad *minim* veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<a href="#">HTML syntax highlightning</a>

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;textarea data-uk-htmleditor="{mode:'tab'}"&gt;...&lt;/textarea&gt;</code></pre>


                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript options</a></h2>

                            <p>This is an example of how to set options via attribute:</p>

                            <pre><code>data-uk-htmleditor=&quot;{mode:'split', maxsplitsize:600}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>Option</th>
                                            <th>Possible value</th>
                                            <th>Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>mode</code></td>
                                            <td>'split', 'tab'</td>
                                            <td>'split'</td>
                                            <td>View mode</td>
                                        </tr>
                                        <tr>
                                            <td><code>toolbar</code></td>
                                            <td>Array</td>
                                            <td>[ "bold", "italic", "strike", "link", "picture", ... ]</td>
                                            <td>Button list to appear in the toolbar</td>
                                        </tr>
                                        <tr>
                                            <td><code>maxsplitsize</code></td>
                                            <td>integer</td>
                                            <td>1000</td>
                                            <td>Min. browser width when to switch to responsive tab mode when in split mode</td>
                                        </tr>
                                        <tr>
                                            <td><code>lblPreview</code></td>
                                            <td>any string</td>
                                            <td>'Preview'</td>
                                            <td>Label string for preview mode</td>
                                        </tr>
                                        <tr>
                                            <td><code>lblCodeview</code></td>
                                            <td>any string</td>
                                            <td>'Markdown'</td>
                                            <td>Label string for code mode</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Init element manually</h3>

                            <pre><code>var htmleditor = $.UIkit.htmleditor(textarea, { /* options */ });</code></pre>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">Documentation</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">Get started</a></li>
                            <li><a href="documentation_how-to-customize.html">How to customize</a></li>
                            <li><a href="documentation_layouts.html">Layout examples</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="addons.html">Add-ons</a></li>
                            <li><a href="documentation_project-structure.html">Project structure</a></li>
                            <li><a href="documentation_create-a-theme.html">Create a theme</a></li>
                            <li><a href="documentation_create-a-style.html">Create a style</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Components</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">Base</a></li>
                            <li><a href="print.html">Print</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="panel.html">Panel</a></li>
                            <li><a href="article.html">Article</a></li>
                            <li><a href="comment.html">Comment</a></li>
                            <li><a href="utility.html">Utility</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">Nav</a></li>
                            <li><a href="navbar.html">Navbar</a></li>
                            <li><a href="subnav.html">Subnav</a></li>
                            <li><a href="breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="tab.html">Tab</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">List</a></li>
                            <li><a href="description-list.html">Description list</a></li>
                            <li><a href="table.html">Table</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">Button</a></li>
                            <li><a href="icon.html">Icon</a></li>
                            <li><a href="close.html">Close</a></li>
                            <li><a href="badge.html">Badge</a></li>
                            <li><a href="alert.html">Alert</a></li>
                            <li><a href="thumbnail.html">Thumbnail</a></li>
                            <li><a href="overlay.html">Overlay</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li><a href="text.html">Text</a></li>
                            <li><a href="animation.html">Animation</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="offcanvas.html">Off-canvas</a></li>
                            <li><a href="switcher.html">Switcher</a></li>
                            <li><a href="toggle.html">Toggle</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="scrollspy.html">Scrollspy</a></li>
                            <li><a href="smooth-scroll.html">Smooth scroll</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Add-ons</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="addons_flex.html">Flex</a></li>
                            <li><a href="addons_cover.html">Cover</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="addons_dotnav.html">Dotnav</a></li>
                            <li><a href="addons_slidenav.html">Slidenav</a></li>
                            <li><a href="addons_pagination.html">Pagination</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="addons_form-advanced.html">Form advanced</a></li>
                            <li><a href="addons_form-file.html">Form file</a></li>
                            <li><a href="addons_form-password.html">Form password</a></li>
                            <li><a href="addons_form-select.html">Form select</a></li>
                            <li><a href="addons_placeholder.html">Placeholder</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent uk-active"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="addons_autocomplete.html">Autocomplete</a></li>
                            <li><a href="addons_datepicker.html">Datepicker</a></li>
                            <li><a href="addons_htmleditor.html">HTML editor</a></li>
                            <li><a href="addons_notify.html">Notify</a></li>
                            <li><a href="addons_search.html">Search</a></li>
                            <li><a href="addons_nestable.html">Nestable</a></li>
                            <li><a href="addons_sortable.html">Sortable</a></li>
                            <li><a href="addons_sticky.html">Sticky</a></li>
                            <li><a href="addons_timepicker.html">Timepicker</a></li>
                            <li><a href="addons_upload.html">Upload</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>